<template>
	<view class="lazy-contianer">
		<image :src="url" :lazy-load="true" :lazy-load-margin="0" :mode="mode" :style="[customStyle]" @load="load">
		</image>
		<image :src="loadImage" :mode="mode" :style="[customStyle,{'z-index':!isLoad ? '999': '-1'}]" class="lazy-image"
			v-if="!isLoad">
		</image>
	</view>
</template>

<script>
	export default {
		props: {
			loadImage: {
				type: [String, null],
				default: require('@/static/common/loading-1-7.png')
			},
			url: {
				type: [String, null],
				default: ''
			},
			customStyle: {
				type: [Object, null, String],
				require: true
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			},
		},
		data() {
			return {
				isLoad: false
			}
		},
		methods: {
			load() {
				this.isLoad = true
			}
		}

	}
</script>

<style lang="scss" scoped>
	.lazy-contianer {
		position: relative;
		width: fit-content;
		height: fit-content;

		.lazy-image {
			position: absolute !important;
			left: 0;
			top: 0;
		}
	}
</style>